import { View } from '@tarojs/components'
import './index.scss'
import { useState } from 'react'

function Transition() {
  const [appear, setAppear] = useState('content')


  return (
    <View className='index'>
      {/* 福字hover */}
      <View className='box'>
        <View className='points'>福</View>
      </View>
      {/* 出现消失点击 */}
      <View className={appear}>
        <View className='item' style='transition-delay:0s;'></View>
        <View className='item' style='transition-delay:0.1s;'></View>
        <View className='item' style='transition-delay:0.2s;'></View>
        <View className='item' style='transition-delay:0.3s;'></View>
        <View className='item' style='transition-delay:0.4s;'></View>
        <View className='item' style='transition-delay:0.5s;'></View>
        <View className='item' style='transition-delay:0.6s;'></View>
      </View>
      <View className='btn3'>
        <button onClick={() => setAppear('content,under')}>出现</button>
        <button onClick={() => setAppear('content')}>消失</button>
      </View>
    </View>
  )
}

export default Transition
